<template>
  <div class="menu1">
    <ul>
      <li>
          <div class="picker" @click="showHide('showClassify')" >
            分类
            <img src="http://file.rzkeji.com/web/recruit/icon/arrowBlack.png" class="downArrow"/>
          </div>
          <!-- <popup-tree-select ref="classify" :items="items"></popup-tree-select> -->
          <popup-picker ref="classify" :col="classifyData" columns_type='mulColumns' @getSelectValue="getSelectValue"></popup-picker>

      </li>
      <li >
          <div class="picker" @click="showHide('showArea')">
            地区
            <img src="http://file.rzkeji.com/web/recruit/icon/arrowBlack.png" class="downArrow"/>
          </div>
          <popup-picker ref="area"  columns_type='area' @getSelectValue="getAreaValue" :col="areaList"></popup-picker>
      </li>

      <!-- <li v-if="showEdustate">
          <div class="picker" @click="showHide('showState')">
            学历
            <img src="http://file.rzkeji.com/web/recruit/icon/arrowBlack.png" class="downArrow"/>
          </div>
          <popup-picker ref="state" :col="stateData"  @getSelectValue="getStateValue"></popup-picker>  
      </li>
      <li v-else>
          <div class="picker" @click="showHide('showMoney')">
            薪资
            <img src="http://file.rzkeji.com/web/recruit/icon/arrowBlack.png" class="downArrow"/>
          </div>
          <popup-picker ref="money" :col="moneyData" columns_type="mulColumns" @getSelectValue="getMoneyValue"></popup-picker>  
      </li> -->
      <!-- <li v-if="showEdustate">
          <div class="picker" @click="showHide('showState')">
            学历
            <img src="http://file.rzkeji.com/web/recruit/icon/arrowBlack.png" class="downArrow"/>
          </div>
          <popup-picker ref="state" :col="stateData"  @getSelectValue="getStateValue"></popup-picker>  
      </li> -->
      <li v-if="!showEdustate">
          <div class="picker" @click="showHide('showMoney')">
            薪资
            <img src="http://file.rzkeji.com/web/recruit/icon/arrowBlack.png" class="downArrow"/>
          </div>
          <popup-picker ref="money" :col="moneyData" columns_type="mulColumns" @getSelectValue="getMoneyValue"></popup-picker>  
      </li>

    </ul>
  </div>
</template>

<script>
// import areaList from '../assets/area'
import popupPicker from './popupPicker';
import area from '../assets/area';
import {mixin1} from '../utils/index.js'

export default {
  mixins:[mixin1],
  props:{
    showEdustate:{
      default:false
    }
  },
  data () {
    return {
      showArea:false,
      showClassify:false,
      showMoney:false,
      showMore:false,
      showState:false,
      classifyData:[],
      classifyData_native:'',
      areaList:{},
      moneyTwoData:[['10-20', '20-30', '30-40', '40-50', '50-100'],['100-200', '200-300', '300-400', '400-500', '500-1000'], ['100-200', '200-300', '300-400', '400-500', '500-1000'], ['1000-2000','2000-3000','3000-4000','4000-5000','5000-6000','6000-7000','7000-8000','8000-9000','10000-20000']],
      moneyOneData:['时薪', '日薪','计件','月薪'],
      stateData:['初中','高中','中技','中专','大专','本科','硕士','博士'],
    }
  },
  computed:{
    moneyData(){
      let money={};
      this.moneyOneData.forEach((value,index)=>{
        money[value]=this.moneyTwoData[index]
      })
      return money
    }
  },
  components:{
    popupPicker
  },
  methods:{
    async getClassifyData(){//获取classify的值
      let res=await this.$axios('/position/getIndustryList',"")
      let columns={};
     this.classifyData_native=res.data.data
     this.classifyData_native.forEach((value)=>{
       let job=[]
       value.job.forEach((value)=>{
         job.push(value.name)
       })
       columns[value.name]=job
     })
    this.classifyData=columns;
    },
    showHide(val){
      switch(val){//显示picker
        case 'showClassify':this.$refs.classify.$data.showArea=true;break;
        case 'showArea':this.$refs.area.$data.showArea=true;break;
        case 'showMoney':this.$refs.money.$data.showArea=true;break;
        case 'showState':this.$refs.state.$data.showArea=true;break;
      }
    },
    getSelectValue(e){
      let classify={
          industry_id:'',
          job_id:''
        }
      this.classifyData_native.forEach((value,index)=>{//获取分类id，并传入vuex
        if(value.name==e[0]){
          classify.industry_id=value.id;
          if(e[1]!=undefined){
            value.job.forEach((k,n)=>{
              if(k.name==e[1]){
                classify.job_id=k.id
              }
            })
          }
        }
      })
      this.$store.dispatch('setClassify',classify)
    },
    getAreaValue(e){//存入area
      let address={
        province:e[0].name,
        city:e[1].name,
        area:e[2].name
      }
      this.$store.dispatch('setAddress',address)
    },
    getMoneyValue(e){//存入money
      let salary={
          salary_type:e[0],
          salary_range:e[1]
        }
        this.$store.dispatch('setSalary',salary)
    },
    getStateValue(e){
      this.$store.dispatch('setEducate',e)
      // console.log(this.$store.state.modulesWork)
    }

  },
  mounted(){
      //这里是获取improt引入的地址数据    import areaList from '../assets/area'是一个json格式数据的js文件
    this.getClassifyData()
    this.getAddress('/other/get-address-all-town')
  }
}
</script>

<style scoped>
.menu1{margin:0 20px;height: 45px}
.menu1 ul{width: 100%;height: 100%;display: flex;justify-content: row}
.menu1 ul li{width: 50%;height: 100%;line-height: 45px;text-align: center;}
.menu1 ul li img{width: 13px;height: 7px;vertical-align: middle;margin-left: 10px;}

</style>
